import { Button, Typography } from 'antd'
import { PlayCircleOutlined, PauseCircleOutlined, ReloadOutlined } from '@ant-design/icons'
import { motion } from 'framer-motion'
import { useCounter, useBoolean, useInterval } from 'ahooks'

const { Title } = Typography

const Counter = () => {
  const [count, { inc, reset }] = useCounter(0)
  const [isRunning, { toggle, setFalse }] = useBoolean(false)

  useInterval(
    () => {
      inc()
    },
    isRunning ? 1000 : undefined
  )

  const handleReset = () => {
    setFalse()
    reset()
  }

  return (
    <div className="text-center space-y-8">
      <motion.div
        key={count}
        initial={{ scale: 0.8, opacity: 0.5 }}
        animate={{ scale: 1, opacity: 1 }}
        transition={{ duration: 0.2 }}
      >
        <Title level={1} className="!mb-0">
          {count}
        </Title>
      </motion.div>

      <div className="space-x-4">
        <Button
          type={isRunning ? 'primary' : 'default'}
          icon={isRunning ? <PauseCircleOutlined /> : <PlayCircleOutlined />}
          onClick={toggle}
          size="large"
        >
          {isRunning ? '停止' : '开始'}
        </Button>
        <Button
          icon={<ReloadOutlined />}
          onClick={handleReset}
          size="large"
          disabled={count === 0}
        >
          重置
        </Button>
      </div>
    </div>
  )
}

export default Counter 